<template>
  <div class="order-managment">
    <!-- <gk-title :gk-title="'详情页'" /> -->
    <div class="title">
      <h1>详情页</h1>
    </div>
    <div class="herder">
      <header>
        <h3>订单流程</h3>
      </header>
      <section>
        <step :step-data="stepData" />
      </section>
    </div>
    <div class="managment">
      <header>
        <h3>订单信息</h3>
      </header>
      <section>
        <el-row>
          <el-col :span="8" style="margin-top:10px">
            退货单号：<span>{{ orderList.orderCode }}</span></el-col
          >
          <el-col :span="8" style="margin-top:10px">
            生产厂家：<span>{{ orderList.originalFactoryName }}</span></el-col
          >
          <el-col :span="8" style="margin-top:10px">
            供应商：<span>{{ orderList.supplierName }}</span></el-col
          >
          <el-col :span="8" style="margin-top:10px">
            市场渠道：<span>{{ orderList.channelTypeName }}</span></el-col
          >
          <el-col :span="8" style="margin-top:10px">
            业务类型：<span>{{ orderList.busModelName }}</span></el-col
          >
          <el-col
            v-if="orderList.receiptInvoice"
            :span="8"
            style="margin-top:10px"
          >
            发票是否已开：<span>{{ receiptInvoice }}</span></el-col
          >
          <el-col
            v-if="orderList.financialEntry"
            :span="8"
            style="margin-top:10px"
          >
            本公司财务是否入账：<span>{{ financialEntry }}</span></el-col
          >
          <el-col :span="8" style="margin-top:10px">
            订单类型：<span>{{ orderList.orderTypeName }}</span></el-col
          >
          <el-col
            v-if="orderList.cancelCount"
            :span="8"
            style="margin-top:10px"
          >
            取消数量：<span>{{ orderList.cancelCount }}</span></el-col
          >
          <el-col
            v-if="orderList.orderStatus === 10"
            :span="8"
            style="margin-top:10px"
          >
            退款金额：<span>{{ orderList.refundAmount }}</span></el-col
          >
          <el-col
            v-if="orderList.cancelReason"
            :span="8"
            style="margin-top:10px"
          >
            取消原因：<span>{{ orderList.cancelReason }}</span></el-col
          >
          <el-col
            v-if="orderList.orderCodeRelate"
            :span="8"
            style="margin-top:10px; color:red;"
          >
            关联原采购单号：<span>{{ orderList.orderCodeRelate }}</span></el-col
          >
          <el-col
            v-if="
              (orderList.orderStatus === 10 || orderList.orderStatus === 12) &&
                orderList.orderCodeExchange
            "
            :span="8"
            style="margin-top:10px; color:red;"
          >
            关联换货单号：<span>{{ orderList.orderCodeExchange }}</span></el-col
          >
        </el-row>
      </section>
    </div>
    <div class="consignor">
      <header>
        <h3>发货人信息</h3>
      </header>
      <section>
        <el-row>
          <el-col :span="8">
            姓名：<span>{{ orderReceiver.addressee }}</span></el-col
          >
          <el-col :span="8">
            电话：<span>{{ orderReceiver.addressPhone }}</span></el-col
          >
        </el-row>
      </section>
    </div>
    <div class="reason">
      <header>
        <h3>退/换货原因</h3>
      </header>
      <section>
        <el-row>
          <el-col
            ><span>{{ orderList.returnReasonName }}</span></el-col
          >
          <el-col style="margin:8px 0 8px 0;"
            ><span>{{ orderList.returnReasonDetail }}</span></el-col
          >
          <el-col
            v-for="(item, index) in pictureList"
            :key="index"
            v-viewer
            :span="30"
          >
            <img
              style="width:200px;height:120px;margin-left:10px;"
              :src="item.fileUrl"
              alt=""
            />
          </el-col>
        </el-row>
      </section>
    </div>
    <div class="product">
      <header>
        <h3>退货产品信息</h3>
        &nbsp;
        <p>( 产品总数量：{{ orderList.productCount }} )</p>
      </header>
      <section>
        <el-editable
          v-loading="tableLoading"
          height="300"
          :data="tableData"
          :columns="userManagemenas"
          @selection-change="handleSelectionChange"
        />
        <el-pagination
          style="margin-top: 10px;"
          align="right"
          :current-page="curPage"
          :page-sizes="PAGE_NUMBER"
          :page-size="pageSize"
          :layout="PAGINATION_LAYOUT"
          :total="totalElements"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </section>
    </div>
    <div
      v-if="orderList.returnWarehouse && orderList.approvalRemark"
      class="examine"
    >
      <header>
        <h3>审批信息</h3>
      </header>
      <section>
        <el-row>
          <el-col :span="11" style="margin-right:15px;">
            退回仓信息：<span>{{ orderList.returnWarehouse }}</span></el-col
          >
          <el-col :span="11">
            审批备注：<span>{{ orderList.approvalRemark }}</span></el-col
          >
        </el-row>
      </section>
    </div>
    <!-- <div class="block" v-if="this.orderList.orderStatus === 5">
			<header>
				<h3>发货信息</h3>
			</header>
			<section>
				<el-row>
					<el-col>
						快递/物流名称：<span>{{ this.orderLogistics.carrierName }}</span></el-col>
					<el-col>
						快递单/物流单号：<span>{{ this.orderLogistics.carrierNo }}</span></el-col>
					<el-col>
						发货时间：<span>{{ this.orderLogistics.deliveryTime }}</span></el-col>
				</el-row>
			</section>
		</div> -->
    <div class="other">
      <header>
        <h3>其他信息</h3>
      </header>
      <section>
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="发货信息" name="first">
            <el-row>
              <el-col>
                快递/物流名称：<span>{{
                  orderLogistics.carrierName
                }}</span></el-col
              >
              <el-col>
                快递单/物流单号：<span>{{
                  orderLogistics.carrierNo
                }}</span></el-col
              >
              <el-col>
                发货时间：<span>{{ orderLogistics.deliveryTime }}</span></el-col
              >
            </el-row>
          </el-tab-pane>
          <el-tab-pane label="实际退货产品" name="second">
            <el-editable
              v-loading="tableLoading"
              height="300"
              :data="qualifiedProductsData"
              :columns="qualifiedProducts"
              stripe
            />
            <el-pagination
              style="margin-top: 10px;"
              align="right"
              :current-page="curPage"
              :page-sizes="PAGE_NUMBER"
              :page-size="pageSize"
              :layout="PAGINATION_LAYOUT"
              :total="qualifiedtotalElements"
              @size-change="actualReturn"
              @current-change="actualReturnChange"
            />
          </el-tab-pane>
          <el-tab-pane label="不符合退货条件的产品" name="third">
            <!-- <el-col style="margin-bottom: 10px;">拒收原因：<span></span></el-col> -->
            <el-editable
              v-loading="tableLoading"
              height="300"
              :data="unqualifiedProductsData"
              :columns="unqualifiedProducts"
              stripe
            />
            <el-pagination
              style="margin-top: 10px;"
              align="right"
              :current-page="curPage"
              :page-sizes="PAGE_NUMBER"
              :page-size="pageSize"
              :layout="PAGINATION_LAYOUT"
              :total="unqualifiedtotalElements"
              @size-change="nonConformity"
              @current-change="nonConformityChange"
            />
          </el-tab-pane>
          <el-tab-pane label="退款金额明细" name="fourth">
            <el-editable
              v-loading="tableLoading"
              height="300"
              :data="refundAmountDetails"
              :columns="refundDetails"
              stripe
            />
            <el-pagination
              style="margin-top: 10px;"
              align="right"
              :total="amountDetailstotalElements"
              :current-page="curPage"
              :page-sizes="PAGE_NUMBER"
              :page-size="pageSize"
              :layout="PAGINATION_LAYOUT"
              @size-change="amountDetails"
              @current-change="amountDetailsChange"
            />
          </el-tab-pane>
        </el-tabs>
      </section>
    </div>
  </div>
</template>
<script>
import GkTitle from '@components/gk/title/index.vue';
import ElEditable from '@components/gk/el-editable/index.vue';
import { PAGE_NUMBER, PAGINATION_LAYOUT } from '@const/common.js';
// eslint-disable-next-line import/extensions
import {
  detailInterface,
  afterOrderStatus,
  returnProductInfo,
  actualReturnedProduct
} from '@api/m_mall_web_v1.js';
// eslint-disable-next-line import/extensions
import step from '~/modules/step';
import {
  userManagemenas,
  unqualifiedProducts,
  qualifiedProducts,
  refundDetails
  // eslint-disable-next-line import/extensions
} from './const.js';

export default {
  // eslint-disable-next-line vue/no-unused-components
  components: { GkTitle, ElEditable, step },
  data() {
    return {
      tableLoading: false,
      orderList: '', // 获取订单信息
      orderReceiver: '', // 获取发货人信息
      pictureList: [], // 获取图片信息
      orderLogistics: '',
      tableData: [], // 表格数据
      stepData: [], // 订单状态流转数据
      activeName: 'first',
      userManagemenas, // 退货产品信息
      unqualifiedProducts, // 不符合退货条件的产品
      qualifiedProducts, // 实际退货产品
      refundDetails, // 退款金额明细
      receiptInvoice: '', // 判断发票是否已开
      financialEntry: '', // 判断公司财务是否入账
      // userManagemenaData: [],
      unqualifiedProductsData: [],
      qualifiedProductsData: [],
      refundAmountDetails: [],
      refundDetailsData: [],
      orderId: this.$route.query.orderId, // 获取orderId
      orderCode: this.$route.query.orderCode, // 获取orderCode
      curPage: 1,
      PAGE_NUMBER, // 页码
      PAGINATION_LAYOUT, // 分页功能
      pageSize: PAGE_NUMBER[0], // 一页的数量
      totalElements: 0, // 总页数
      qualifiedtotalElements: 0,
      unqualifiedtotalElements: 0,
      amountDetailstotalElements: 0
    };
  },
  created() {
    this.getStepList();
    this.getDetailInterface();
    this.getReturnInformation();
  },
  methods: {
    // 获取转态流转接口
    getStepList() {
      const params = {
        orderId: this.orderId
      };
      this.$axios.$post(afterOrderStatus, params).then(res => {
        if (res.code === '0' && res.payload.orderStatusInfoVO) {
          this.stepData = res.payload.orderStatusInfoVO;
        }
      });
    },
    getDetailInterface() {
      this.$axios
        .$post(detailInterface, { orderId: this.orderId })
        .then(res => {
          if (res.code === '0') {
            this.orderList = res.payload.orderData;
            this.orderReceiver = res.payload.orderReceiver || {};
            this.orderLogistics = res.payload.orderLogistics;
            this.pictureList = res.payload.commonFile;
            const { receiptInvoice } = this.orderList;
            if (receiptInvoice === '1') {
              this.receiptInvoice = '已开';
            } else if (receiptInvoice === '2') {
              this.receiptInvoice = '未开';
            }
            const { financialEntry } = this.orderList;
            if (financialEntry === '1') {
              this.financialEntry = '是';
            } else if (financialEntry === '2') {
              this.financialEntry = '否';
            }
          }
        });
    },
    // 获取退货产品信息列表数据
    getReturnInformation() {
      this.tableLoading = true;
      const params = {
        returnOrderCode: this.orderCode,
        page: this.curPage,
        pageSize: this.pageSize
      };
      this.$axios.$post(returnProductInfo, params).then(res => {
        this.tableData = res.payload.content || [];
        this.totalElements = res.payload.totalElements;
        this.tableData.forEach(item => {
          const newItem = item;
          newItem.productCount = parseFloat(item.productCount);
        });
        this.tableLoading = false;
      });
    },
    // 实际退货产品
    getReturnedProducts() {
      this.tableLoading = true;
      const params = {
        orderCode: this.orderCode,
        flag: 1,
        page: this.curPage,
        pageSize: this.pageSize
      };
      this.$axios.$post(actualReturnedProduct, params).then(res => {
        this.qualifiedProductsData = res.payload.content || [];
        this.qualifiedProductsData.forEach(item => {
          const newItem = item;
          newItem.productCount = parseFloat(item.productCount);
          newItem.returnAmount = Number(item.returnAmount).toFixed(2);
        });
        this.qualifiedtotalElements = res.payload.totalElements;
        this.tableLoading = false;
      });
    },
    // 不符合退货条件的产品
    getUnqualified() {
      this.tableLoading = true;
      const params = {
        orderCode: this.orderCode,
        flag: 2,
        page: this.curPage,
        pageSize: this.pageSize
      };
      this.$axios.$post(actualReturnedProduct, params).then(res => {
        this.unqualifiedProductsData = res.payload.content;
        this.unqualifiedProductsData.forEach(item => {
          const newItem = item;
          newItem.productCount = parseFloat(item.productCount);
        });
        this.unqualifiedtotalElements = res.payload.totalElements;
        this.tableLoading = false;
      });
    },
    // 退款金额明细
    getReturnedProductsDate() {
      this.tableLoading = true;
      const params = {
        orderCode: this.orderCode,
        flag: 3,
        page: this.curPage,
        pageSize: this.pageSize
      };
      this.$axios.$post(actualReturnedProduct, params).then(res => {
        this.refundAmountDetails = res.payload.content || [];
        this.refundAmountDetails.forEach(item => {
          const newItem = item;
          newItem.productCount = parseFloat(item.productCount);
          newItem.returnAmount = Number(item.returnAmount).toFixed(2);
        });
        this.amountDetailstotalElements = res.payload.totalElements;
        this.tableLoading = false;
      });
    },
    // 底部tab切换调用不同接口
    handleClick(tab) {
      if (tab.name === 'second') {
        this.getReturnedProducts();
      }
      if (tab.name === 'third') {
        this.getUnqualified();
      }
      if (tab.name === 'fourth') {
        this.getReturnedProductsDate();
      }
    },
    handleSelectionChange() {},
    // 页码更改
    handleSizeChange(size) {
      this.curPage = 1;
      this.pageSize = size;
      this.getReturnInformation();
    },
    // 切换不一样的页面,重置一切数据
    handleCurrentChange(curPage) {
      this.curPage = 1;
      this.curPage = curPage;
      this.getReturnInformation();
    },
    // 实际退货产品页码更改
    actualReturn(size) {
      this.curPage = 1;
      this.pageSize = size;
      this.getReturnedProducts();
    },
    // 实际退货产品切换不一样的页面,重置一切数据
    actualReturnChange(curPage) {
      this.curPage = 1;
      this.curPage = curPage;
      this.getReturnedProducts();
    },
    // 不符合退货条件产品页码更改
    nonConformity(size) {
      this.curPage = 1;
      this.pageSize = size;
      this.getUnqualified();
    },
    // 不符合退货条件的产品切换不一样的页面,重置一切数据
    nonConformityChange(curPage) {
      this.curPage = 1;
      this.curPage = curPage;
      this.getUnqualified();
    },
    // 退款金额明细页码更改
    amountDetails(size) {
      this.curPage = 1;
      this.pageSize = size;
      this.getReturnedProductsDate();
    },
    // 退款金额明细切换不一样的页面,重置一切数据
    amountDetailsChange(curPage) {
      this.curPage = 1;
      this.curPage = curPage;
      this.getReturnedProductsDate();
    }
  }
};
</script>
<style lang="less">
.order-managment {
  .herder {
    header {
      height: 22px;
      padding: 12px 16px;
      border-bottom: 1px solid #eef0f5;
    }
    section {
      height: 160px;
      padding: 12px 16px;
    }
  }
  .managment {
    header {
      height: 22px;
      padding: 12px 16px;
      border-bottom: 1px solid #eef0f5;
    }
    section {
      padding: 12px 16px;
    }
  }
  .consignor {
    header {
      height: 22px;
      padding: 12px 16px;
      border-bottom: 1px solid #eef0f5;
    }
    section {
      padding: 12px 16px;
    }
  }
  .reason {
    header {
      height: 22px;
      padding: 12px 16px;
      border-bottom: 1px solid #eef0f5;
    }
    section {
      padding: 12px 16px;
    }
  }
  .product {
    header {
      height: 22px;
      padding: 12px 16px;
      border-bottom: 1px solid #eef0f5;
      display: flex;
    }
    section {
      padding: 12px 16px;
    }
  }
  .examine {
    header {
      height: 22px;
      padding: 12px 16px;
      border-bottom: 1px solid #eef0f5;
      // display: flex;
    }
    section {
      padding: 12px 16px;
    }
  }
  .other {
    header {
      height: 22px;
      padding: 12px 16px;
      border-bottom: 1px solid #eef0f5;
      // display: flex;
    }
    section {
      padding: 12px 16px;
    }
  }
}
.title {
  padding-left: 15px;
  border-bottom: 1px solid #eef0f5;
  h1 {
    line-height: 40px;
  }
}
</style>
